<%--
  Created by IntelliJ IDEA.
  User: zhaohu
  Date: 2020/4/7
  Time: 19:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息新增</title>
    <%--    引入jquery资源文件：必须在bootstrap资源文件之前引入--%>
    <script type="text/javascript" src="static/jquery-1.12.4/jquery-1.12.4.js"></script>
    <%--    引入bootstrap的资源文件--%>
    <script type="text/javascript" src="static/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
    <link  rel="stylesheet" type="text/css" href="static/bootstrap-3.3.6-dist/css/bootstrap.css">
    <meta charset="utf-8">
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="static/jqueryui/style.css">
    <script>
        $(function() {
            $( "#userDate" ).datepicker();
        });
    </script>

</head>
<body>
<div style="padding-top: 20px">
    <form class="form-horizontal" action="userAddServlet" method="post">
        $('#saveorupdateModal').modal('show');
        // 给modal中的 更新 按钮，绑定一个click点击事件，用于保存form表单的数据
        $("#btnUpdate").on("click", function () {
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
                </div>

                <label class="col-sm-2 control-label">地址</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="userDizhi" name="userdizhi" placeholder="请输入地址">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="userpsw" name="userpsw" placeholder="请输入密码">
                </div>
                <label class="col-sm-2 control-label">联系电话</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="userCall" name="usercall" placeholder="请输入联系电话">
                </div>
            </div>

            <div class="form-group">


                <label class="col-sm-2 control-label">注册日期</label>
                <script>
                    $(function() {
                        $( "#userdate" ).datepicker({
                            showButtonPanel: true
                        });
                    });
                </script>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="userdate" name="userdate" placeholder="请输入注册日期">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">新增</button>
                </div>
            </div>
        }
    </form>

</div>

    <%--将bootstrap的模态框放入，body部分的最后，最好不要和其他的div穿插在一起--%>
    <div class="modal fade" tabindex="-1" role="dialog" id="saveorupdateModal" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="gridSystemModalLabel">用户信息管理</h4>
                </div>
                <div class="modal-body">
                    <%--modal模态框的主体部分，这里绘制新增或者修改页面--%>
                    <div style="padding-top: 20px">
                        <form class="form-horizontal" id="form4update">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="username4update" name="username"
                                           placeholder="请输入姓名">
                                </div>

                                <label class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="useraddress4update" name="userdizhi"
                                           placeholder="请输入地址">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-4">
                                    <input type="password" class="form-control" id="userpsw4update" name="userpsw"
                                           placeholder="请输入密码">
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系电话</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="usertel4update" name="usercall"
                                           placeholder="请输入联系电话">
                                </div>

                                <label class="col-sm-2 control-label">注册日期</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="userregdate4update" name="userdate"
                                           placeholder="请输入注册日期">
                                </div>
                            </div>
                        </form>
                    </div>

                    <%--模态框主题页面绘制完成--%>

                </div>
                <div class="modal-footer">
                    <button type="button" id="btnUpdate" class="btn btn-default">更新</button>
                    <button type="button" id="btnClose" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



</div>
</body>
</html>
